// 人气推荐
ajax({
  url: "/sa/cake-1.json",
  success: function (res) {
    res = JSON.parse(res);
    dangao.innerHTML = render(res.data.cake);
    musi.innerHTML = render(res.data.cakes);
    danjuan.innerHTML = render(res.data.noon);
    shicai.innerHTML = render1(res.data.jingxuan);
  },
});
// 人气推荐渲染
var dangao = document.querySelector(".dangao");
var musi = document.querySelector(".musi");
var danjuan = document.querySelector(".danjuan");
var shicai = document.querySelector(".shicai");
function render(data) {
  return data
    .map(function (item) {
      return `<div class="dang">
        <div class="sheng">
            <img src="${item.img}" alt="" class="img"  index="${item.id}">
        </div>
        <div class="xia">
            <img src="${item.ima}" alt="" class="img1"  index="${item.id}">
        </div>
        <div class="kuan">
            <h4 class="guo">${item.name}</h4>
            <span class="jia">￥${
              item.ke ? item.prices + "/" + item.ke + "克" : item.prices
            }</span>
        </div>
    </div>`;
    })
    .join("");
}

var content = document.querySelector(".content");
content.onclick = function (e) {
  var e = e || window.event;

  if (e.target.classList.contains("img1")) {
    var id = e.target.getAttribute("index");
    location.href = "../html/detailes.html?id=" + id;
  }
};
// 精选食材渲染
function render1(data) {
  return data
    .map(function (item) {
      return `<div class="dan">
        <div class="sheng1">
        <a href="../html/food.html#a${item.id}">
          <img src="${item.img}" alt="" class="imf">
        </a>
        </div>
        <div class="kuan">
            <h4 class="guo">${item.name}</h4>
            <span class="jia">${item.nick}</span>
        </div>
    </div>`;
    })
    .join("");
}

// 点击出现微信码，再次点击就消失
var gong = document.querySelector(".gong");
var weixin = document.querySelector(".weixin");
gong.onclick = function (e) {
  var e = e || window.event;
  e.preventDefault();
  var status = weixin.style.display;
  if (status == "none") {
    weixin.style.display = "block";
  } else {
    weixin.style.display = "none";
  }
};

// 回到顶部
var dingbu = document.querySelector(".dingbu");
window.onscroll = function () {
  var height = window.innerHeight + scrollY;
  if (height > window.innerHeight) {
    dingbu.style.display = "block";
    dingbu.onclick = function () {
      scrollTo({ top: 0, behavior: "smooth" });
    };
  } else {
    dingbu.style.display = "none";
  }
};

//  Initialize Swiper
var swiper = new Swiper(".swiper-container", {
  loop: true,
  autoplay: {
    delay: 3000,
    // stopOnLastSlide: false,
    // disableOnInteraction: false,
  },
  effect: "fade",
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
    renderBullet: function (index, className) {
      return '<span class="' + className + '">' + (index + 1) + "</span>";
    },
  },
});
//点击播放视频
var ved = document.querySelector(".ved");
var mask = document.querySelector(".mask");
var video = document.querySelector("video");
ved.onclick = (e) => {
  var e = e || window.event;
  mask.style.display = "block";
  video.play(); //点击就开始播放
  setStyle();
};
var closex = document.querySelector(".closex");
closex.onclick = () => {
  mask.style.display = "none";
  video.pause(); //点击关闭的时候视频也停止播放
  video.currentTime = 0; //设置该属性时，播放会跳跃到指定的位置。
};
window.onresize = setStyle;
var shows = document.querySelector(".shows");
//视频的位置
function setStyle() {
  shows.style.left = (innerWidth - shows.offsetWidth) / 2 + "px";
  shows.style.top = (innerHeight - shows.offsetHeight) / 2 + "px";
}
